import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import * as React from "react";
import { Card, Col, Row, Tabs } from "antd";
import topImage from "../../images/health-information.png";
import InformationContent from "./InformationContent";

const styles = (theme: Theme) =>
  createStyles<"root" | "middle">({
    root: {
      marginTop: 20
    },
    middle: {}
  });

interface Iprops extends WithStyles<typeof styles> {}

/**
 * 描述：
 *  健康资讯
 * @author sunshixiong
 * @date 2019/3/18-14:42
 */
const HealthInformation = (props: Iprops) => {
  return (
    <Row type={"flex"} justify={"center"} className={props.classes.root}>
      <Col span={12}>
        <img src={topImage} style={{ width: "100%", marginBottom: 5 }} />
        <Card hoverable={true}>
          <Tabs defaultActiveKey="1">
            <Tabs.TabPane tab="大众保健" key="1">
              <InformationContent firstType={"健康资讯"} secondType={"大众保健"} />
            </Tabs.TabPane>
            <Tabs.TabPane tab="慢病护理" key="2">
              <InformationContent firstType={"健康资讯"} secondType={"慢病护理"} />
            </Tabs.TabPane>
            <Tabs.TabPane tab="老年人保健" key="3">
              <InformationContent firstType={"健康资讯"} secondType={"老年人保健"} />
            </Tabs.TabPane>
            <Tabs.TabPane tab="孕产妇保健" key="4">
              <InformationContent firstType={"健康资讯"} secondType={"孕产妇保健"} />
            </Tabs.TabPane>
            <Tabs.TabPane tab="婴幼儿护理" key="5">
              <InformationContent firstType={"健康资讯"} secondType={"婴幼儿护理"} />
            </Tabs.TabPane>
          </Tabs>
        </Card>
      </Col>
    </Row>
  );
};

export default withStyles(styles)(HealthInformation);
